[NuxtJS] Creating NuxtJS 404 or 500 error pages

If an error occurs in a NuxtJS app, to display an error message, you can create a custom error page to show if it's an unexpected error or a non-existent page.

# Creating NuxtJS 404 or 500 error pages

There are several ways to directly create and display error pages, such as creating files like 404.vue or 500.vue in the /pages/ directory or creating an error.vue file in the /layouts/ directory.

Both methods are possible, but in this case, we'll focus on creating an error.vue file in the /layouts/ directory. The advantage of this method is that you can handle different error codes in the /layouts/error.vue file and display different messages or perform different functions accordingly.


!! Other methods
Note that there are other ways to do this as well. For example, you can also use middleware to detect errors and display error messages or move to an error page. Keep this in mind.

Now let's take a closer look at how to actually create an error page below.

! View Custom Error Page Example

The webisfree.com website also uses the same method to create and use custom error pages. When an error occurs, it displays the corresponding error message and a button to return to the main page.


Screenshot) websifree.com custom 404 error page

Now, we will create a custom page in the following order:

• Create the /layouts/error.vue file.
• Add the props error to the error.vue file.
• Show the code that branches depending on the statusCode of error.

The completed code, in the order above, is as follows:

If you look at the props, you can see that error has been added. Through this props, you can receive error and receive the current error message, message, and the error status value, statusCode, as properties. By checking this, it is possible to show different messages depending on the error.

@ Branch processing according to error message
The code below is part of the above code, and is the part that branches depending on error.statusCode.

Looking at the code, if the value of error.statusCode is 404, it uses v-if to expose the message "The page you tried to access does not exist. Please check the address again." Other error codes will display "An unknown error has occurred."

! If it does not work properly

An unexpected error may occur and the function may not work properly. First, check if the file name and path are correct. If there is no problem, you need to check if the error is properly added to the props. The error property must be added to enable branching processing according to error in error.vue, so check again.

So far, we briefly looked at how to create a custom 404 error page in nuxtjs.